<template>
  <el-header>
    <!-- 左侧：折叠菜单的控制按钮 -->
    <el-row class="header-content">
      <el-col :span="2">
        <el-button @click="toggleAside">
          <el-icon color="rgb(56,18,110)" size="large">
            <component :is="toggleIcon" />
          </el-icon>
        </el-button>
      </el-col>

      <!-- 右侧： 登录的信息信息 -->
      <el-col :span="22" style="text-align: right">
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>Welcome,</span>
            <span style="margin: 0 10px">{{ userInfo.username }}</span>
            <el-avatar :size="60" :src="userInfo.avatar" />
          </span>
          <!-- 右上角下拉菜单 -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="modifyMwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click="info">个人资料</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useSidebarStore } from '@/stores/sidebar'
import { useTabsStore } from '@/stores/tabs'
import { clearDynamicRoutes } from '@/router/menu'

const sidebar = useSidebarStore()
const router = useRouter()
const tabsStore = useTabsStore()

const toggleIcon = ref('Fold')
const toggleAside = () => {
  sidebar.handleCollapse()
  toggleIcon.value = sidebar.isCollapse.value ? 'Expand' : 'Fold'
}

const BACKEND_BASE_URL = 'http://localhost:8181' // 根据你后端实际地址调整

const userInfo = reactive({
  avatar: '/src/assets/img/2.jfif', // 默认头像
  username: '管理员',
})

onMounted(() => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    try {
      const user = JSON.parse(userStr)
      userInfo.username = user.name || user.username || '未命名用户'

      if (user.avatar) {
        if (user.avatar.startsWith('http')) {
          userInfo.avatar = user.avatar
        } else if (user.avatar.startsWith('/')) {
          // 以斜杠开头的相对路径，拼接后端基础地址
          userInfo.avatar = BACKEND_BASE_URL + user.avatar
        } else {
          // 纯文件名，拼接完整访问路径
          userInfo.avatar = `${BACKEND_BASE_URL}/avatar/${user.avatar}`
        }
      } else {
        userInfo.avatar = '/src/assets/img/2.jfif'
      }
    } catch (e) {
      console.error('解析本地用户信息失败', e)
    }
  }
})

const info = () => {
  tabsStore.addTab({ name: 'Info', title: '个人信息' })
  router.push({ name: 'Info' })
}
const modifyMwd = () => {
  tabsStore.addTab({ name: 'ModifyPwd', title: '修改密码' })
  router.push({ name: 'ModifyPwd' })
}
const logout = () => {
  clearDynamicRoutes()
  localStorage.removeItem('user')
  localStorage.removeItem('tabs')
  localStorage.removeItem('activeTab')
  sessionStorage.clear()
  tabsStore.clearTabs()
  router.push('/login')
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #dbe3ec;
  color: #333;
  text-align: left;
  line-height: 60px;
}

.el-dropdown-link {
  display: inline-flex;
  align-items: center;
}

/* 去除点击时的黑色边框 */
.el-tooltip__trigger:focus {
  outline: none; // unset 这个也行
}
</style>
